<template>
  <div class="auctionTimeOut">
    <div class="shoppingShow"  v-for="(auctionTimeOut,auction) in auctionTimeOut" :key="auction">
        <img :src="auctionTimeOut.mainPic" class="goodsShow">
        <div class="shoppingShowRight">
            <p class="goodsTitle">{{auctionTimeOut.productName}}</p>
            <span class="goodslabel">{{auctionTimeOut.productGrade}}级</span>
            <span class="goodslabel">{{auctionTimeOut.dispark}}</span>
            <span class="goodslabel">长度:{{auctionTimeOut.productLength}}</span>
            <!-- <span class="goodslabel">{{auctionTimeOut.num}}</span> -->
            <div class="goodsMarket">
              <span class="market">采购数量:{{auctionTimeOut.productStock}}{{auctionTimeOut.flowerUnit}}</span>
              <!-- <span class="inventory">仅剩{{auctionTimeOut.productStock}}{{auctionTimeOut.flowerUnit}}</span> -->
            </div>
            <span class="goodstimeout">倒计时:{{auctionTimeOut.endTime}}</span>
            <!-- <span class="goodsGroup">参与竞拍</span> -->
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"auctionTimeOut",
    props:{
      auctionTimeOut:{
        type:Array,
        default:[]
      }
    }
}
</script>

<style scoped>
  .auctionGoods{
    background-color: rgba(247,249,252,1);
  }
  .shoppingShow{
    width:100%;
    display: flex;
    margin-top: 10px;
    background-color: #fff;
  }
  .goodsShow{
    width: 112px;
    height: 112px;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 20px;
    flex: 0.5;
  }
  .shoppingShowRight{
    flex: 1;
    margin-left: 5%;
    vertical-align: middle;
  }
  .goodsTitle{
    font-size:14px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:18px;
    white-space:nowrap;
  }
  .goodslabel{
    background:#f7f9fc;
    border-radius:2px;
    font-size:10px;
    font-weight:500;
    color:rgba(169,173,191,1);
    line-height:18px;
    margin:0 5px;
    padding: 2px;
  }
  .goodsMarket{
    margin-top: 8px;
  }
  .market{
    background:#fff0e6;
    border-radius:3px;
    font-size:10px;
    font-weight:500;
    color:rgba(255,98,0,1);
    line-height:30px;
    margin-left: 2px;
  }
  .inventory{
    font-size:10px;
    font-weight:500;
    color:rgba(169,174,192,1);
    margin-left: 50px;
  }
  .goodstimeout{
      line-height: 36px;
      font-size:12px;
      font-weight:bold;
      color:rgba(0,198,87,1);
      margin-left: 2px;
  }
  .goodsGroup{
    font-size: 12px;
    background:rgba(0,198,87,1);
    border-radius:10px;
    padding: 5px;
    color:#fff;
    margin-left:25px;
  }
</style>
